﻿<template>
  <div class="reports-center">
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>鎶ヨ〃涓績</h3>
          <div class="header-actions">
            <el-button type="primary" @click="showCreateReportDialog">
              <el-icon><Plus /></el-icon>
              鏂板缓鎶ヨ〃
            </el-button>
            <el-button type="success" @click="showTemplateDialog">
              <el-icon><Document /></el-icon>
              鎶ヨ〃妯℃澘
            </el-button>
          </div>
        </div>
      </template>

      <div class="report-categories">
        <el-tabs v-model="activeCategory" @tab-change="handleCategoryChange">
          <el-tab-pane label="鍩虹鎶ヨ〃" name="basic">
            <div class="category-content">
              <el-row :gutter="20">
                <el-col :span="8" v-for="report in basicReports" :key="report.id">
                  <el-card class="report-card" @click="openReport(report)">
                    <div class="report-icon">
                      <el-icon :size="32" :color="report.color">
                        <component :is="report.icon" />
                      </el-icon>
                    </div>
                    <h4>{{ report.name }}</h4>
                    <p>{{ report.description }}</p>
                    <div class="report-meta">
                      <el-tag size="small" :type="report.type">{{ report.category }}</el-tag>
                      <span class="update-time">{{ report.lastUpdate }}</span>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>

          <el-tab-pane label="閫忚鎶ヨ〃" name="pivot">
            <div class="category-content">
              <el-row :gutter="20">
                <el-col :span="8" v-for="report in pivotReports" :key="report.id">
                  <el-card class="report-card" @click="openReport(report)">
                    <div class="report-icon">
                      <el-icon :size="32" :color="report.color">
                        <component :is="report.icon" />
                      </el-icon>
                    </div>
                    <h4>{{ report.name }}</h4>
                    <p>{{ report.description }}</p>
                    <div class="report-meta">
                      <el-tag size="small" :type="report.type">{{ report.category }}</el-tag>
                      <span class="update-time">{{ report.lastUpdate }}</span>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>

          <el-tab-pane label="鑷畾涔夋姤琛? name="custom">
            <div class="category-content">
              <el-row :gutter="20">
                <el-col :span="8" v-for="report in customReports" :key="report.id">
                  <el-card class="report-card" @click="openReport(report)">
                    <div class="report-icon">
                      <el-icon :size="32" :color="report.color">
                        <component :is="report.icon" />
                      </el-icon>
                    </div>
                    <h4>{{ report.name }}</h4>
                    <p>{{ report.description }}</p>
                    <div class="report-meta">
                      <el-tag size="small" :type="report.type">{{ report.category }}</el-tag>
                      <span class="update-time">{{ report.lastUpdate }}</span>
                    </div>
                    <div class="report-actions">
                      <el-button type="primary" size="small" @click.stop="editReport(report)">
                        缂栬緫
                      </el-button>
                      <el-button type="danger" size="small" @click.stop="deleteReport(report)">
                        鍒犻櫎
                      </el-button>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="recent-reports">
        <h4>鏈€杩戜娇鐢?/h4>
        <el-table :data="recentReports" stripe>
          <el-table-column prop="name" label="鎶ヨ〃鍚嶇О" width="200" />
          <el-table-column prop="category" label="鍒嗙被" width="120">
            <template #default="{ row }">
              <el-tag size="small" :type="row.type">{{ row.category }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="lastUsed" label="鏈€鍚庝娇鐢? width="180" />
          <el-table-column prop="useCount" label="浣跨敤娆℃暟" width="100" />
          <el-table-column label="鎿嶄綔" width="150">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="openReport(row)">
                鎵撳紑
              </el-button>
              <el-button type="success" size="small" @click="exportReport(row)">
                瀵煎嚭
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog
      v-model="createReportDialogVisible"
      title="鏂板缓鎶ヨ〃"
      width="800px"
      @close="handleCreateDialogClose"
    >
      <el-form :model="createReportForm" :rules="createReportRules" ref="createReportFormRef" label-width="100px">
        <el-form-item label="鎶ヨ〃鍚嶇О" prop="name">
          <el-input v-model="createReportForm.name" placeholder="璇疯緭鍏ユ姤琛ㄥ悕绉? />
        </el-form-item>
        
        <el-form-item label="鎶ヨ〃绫诲瀷" prop="type">
          <el-select v-model="createReportForm.type" placeholder="璇烽€夋嫨鎶ヨ〃绫诲瀷" style="width: 100%">
            <el-option label="鍩虹鎶ヨ〃" value="basic" />
            <el-option label="閫忚鎶ヨ〃" value="pivot" />
            <el-option label="鍥捐〃鎶ヨ〃" value="chart" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="鏁版嵁婧? prop="dataSource">
          <el-select v-model="createReportForm.dataSource" placeholder="璇烽€夋嫨鏁版嵁婧? style="width: 100%">
            <el-option label="閿€鍞暟鎹? value="sales" />
            <el-option label="閲囪喘鏁版嵁" value="purchase" />
            <el-option label="搴撳瓨鏁版嵁" value="inventory" />
            <el-option label="璐㈠姟鏁版嵁" value="finance" />
            <el-option label="鐢ㄦ埛鏁版嵁" value="users" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="鎶ヨ〃鎻忚堪" prop="description">
          <el-input
            v-model="createReportForm.description"
            type="textarea"
            :rows="3"
            placeholder="璇疯緭鍏ユ姤琛ㄦ弿杩?
          />
        </el-form-item>
        
        <el-form-item label="鎶ヨ〃妯℃澘" prop="template">
          <el-select v-model="createReportForm.template" placeholder="璇烽€夋嫨鎶ヨ〃妯℃澘" style="width: 100%">
            <el-option label="鏍囧噯琛ㄦ牸" value="table" />
            <el-option label="鏁版嵁閫忚琛? value="pivot" />
            <el-option label="鏌辩姸鍥? value="bar" />
            <el-option label="鎶樼嚎鍥? value="line" />
            <el-option label="楗煎浘" value="pie" />
          </el-select>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="createReportDialogVisible = false">鍙栨秷</el-button>
        <el-button type="primary" @click="createReport" :loading="createLoading">
          鍒涘缓鎶ヨ〃
        </el-button>
      </template>
    </el-dialog>

    <el-dialog
      v-model="templateDialogVisible"
      title="鎶ヨ〃妯℃澘"
      width="1000px"
    >
      <el-tabs v-model="activeTemplateTab">
        <el-tab-pane label="閿€鍞姤琛ㄦā鏉? name="sales">
          <div class="template-grid">
            <div class="template-item" v-for="template in salesTemplates" :key="template.id">
              <el-card class="template-card" @click="useTemplate(template)">
                <div class="template-preview">
                  <el-icon :size="48" color="#409EFF">
                    <component :is="template.icon" />
                  </el-icon>
                </div>
                <h4>{{ template.name }}</h4>
                <p>{{ template.description }}</p>
                <el-button type="primary" size="small">浣跨敤妯℃澘</el-button>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="閲囪喘鎶ヨ〃妯℃澘" name="purchase">
          <div class="template-grid">
            <div class="template-item" v-for="template in purchaseTemplates" :key="template.id">
              <el-card class="template-card" @click="useTemplate(template)">
                <div class="template-preview">
                  <el-icon :size="48" color="#67C23A">
                    <component :is="template.icon" />
                  </el-icon>
                </div>
                <h4>{{ template.name }}</h4>
                <p>{{ template.description }}</p>
                <el-button type="primary" size="small">浣跨敤妯℃澘</el-button>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="搴撳瓨鎶ヨ〃妯℃澘" name="inventory">
          <div class="template-grid">
            <div class="template-item" v-for="template in inventoryTemplates" :key="template.id">
              <el-card class="template-card" @click="useTemplate(template)">
                <div class="template-preview">
                  <el-icon :size="48" color="#E6A23C">
                    <component :is="template.icon" />
                  </el-icon>
                </div>
                <h4>{{ template.name }}</h4>
                <p>{{ template.description }}</p>
                <el-button type="primary" size="small">浣跨敤妯℃澘</el-button>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

// 鍝嶅簲寮忔暟鎹?
const activeCategory = ref('basic')
const activeTemplateTab = ref('sales')
const createReportDialogVisible = ref(false)
const templateDialogVisible = ref(false)
const createLoading = ref(false)
const createReportFormRef = ref()

// 鏂板缓鎶ヨ〃琛ㄥ崟
const createReportForm = reactive({
  name: '',
  type: '',
  dataSource: '',
  description: '',
  template: ''
})

// 琛ㄥ崟楠岃瘉瑙勫垯
const createReportRules = {
  name: [
    { required: true, message: '璇疯緭鍏ユ姤琛ㄥ悕绉?, trigger: 'blur' }
  ],
  type: [
    { required: true, message: '璇烽€夋嫨鎶ヨ〃绫诲瀷', trigger: 'change' }
  ],
  dataSource: [
    { required: true, message: '璇烽€夋嫨鏁版嵁婧?, trigger: 'change' }
  ],
  template: [
    { required: true, message: '璇烽€夋嫨鎶ヨ〃妯℃澘', trigger: 'change' }
  ]
}

// 鍩虹鎶ヨ〃鏁版嵁
const basicReports = ref([
  {
    id: 1,
    name: '閿€鍞眹鎬绘姤琛?,
    description: '鎸夋椂闂淬€佸鎴枫€佷骇鍝佺瓑缁村害姹囨€婚攢鍞暟鎹?,
    category: '閿€鍞姤琛?,
    type: 'primary',
    icon: 'TrendCharts',
    color: '#409EFF',
    lastUpdate: '2024-01-15 10:00'
  },
  {
    id: 2,
    name: '閲囪喘鏄庣粏鎶ヨ〃',
    description: '璇︾粏鐨勯噰璐鍗曞拰渚涘簲鍟嗕俊鎭姤琛?,
    category: '閲囪喘鎶ヨ〃',
    type: 'success',
    icon: 'ShoppingCart',
    color: '#67C23A',
    lastUpdate: '2024-01-15 09:30'
  },
  {
    id: 3,
    name: '搴撳瓨鐩樼偣鎶ヨ〃',
    description: '褰撳墠搴撳瓨鐘跺喌鍜屽簱瀛樺彉鍔ㄦ槑缁?,
    category: '搴撳瓨鎶ヨ〃',
    type: 'warning',
    icon: 'Box',
    color: '#E6A23C',
    lastUpdate: '2024-01-15 08:45'
  },
  {
    id: 4,
    name: '璐㈠姟鎶ヨ〃',
    description: '鏀跺叆銆佹敮鍑恒€佸埄娑︾瓑璐㈠姟鏁版嵁姹囨€?,
    category: '璐㈠姟鎶ヨ〃',
    type: 'info',
    icon: 'Money',
    color: '#909399',
    lastUpdate: '2024-01-14 16:20'
  },
  {
    id: 5,
    name: '瀹㈡埛鍒嗘瀽鎶ヨ〃',
    description: '瀹㈡埛璐拱琛屼负鍜屼俊鐢ㄧ姸鍐靛垎鏋?,
    category: '瀹㈡埛鎶ヨ〃',
    type: 'primary',
    icon: 'User',
    color: '#409EFF',
    lastUpdate: '2024-01-14 14:15'
  },
  {
    id: 6,
    name: '渚涘簲鍟嗚瘎浼版姤琛?,
    description: '渚涘簲鍟嗙哗鏁堝拰鍚堜綔鎯呭喌璇勪及',
    category: '渚涘簲鍟嗘姤琛?,
    type: 'success',
    icon: 'OfficeBuilding',
    color: '#67C23A',
    lastUpdate: '2024-01-14 11:30'
  }
])

// 閫忚鎶ヨ〃鏁版嵁
const pivotReports = ref([
  {
    id: 7,
    name: '閿€鍞暟鎹€忚琛?,
    description: '澶氱淮搴﹂攢鍞暟鎹€忚鍒嗘瀽',
    category: '閫忚鎶ヨ〃',
    type: 'primary',
    icon: 'DataAnalysis',
    color: '#409EFF',
    lastUpdate: '2024-01-15 10:30'
  },
  {
    id: 8,
    name: '搴撳瓨鍛ㄨ浆鍒嗘瀽',
    description: '搴撳瓨鍛ㄨ浆鐜囧拰婊為攢鍟嗗搧鍒嗘瀽',
    category: '閫忚鎶ヨ〃',
    type: 'warning',
    icon: 'PieChart',
    color: '#E6A23C',
    lastUpdate: '2024-01-15 09:15'
  },
  {
    id: 9,
    name: '鎴愭湰鍒╂鼎鍒嗘瀽',
    description: '浜у搧鎴愭湰鏋勬垚鍜屽埄娑﹀垎鏋?,
    category: '閫忚鎶ヨ〃',
    type: 'info',
    icon: 'TrendCharts',
    color: '#909399',
    lastUpdate: '2024-01-14 15:45'
  }
])

// 鑷畾涔夋姤琛ㄦ暟鎹?
const customReports = ref([
  {
    id: 10,
    name: '鏈堝害閿€鍞姤鍛?,
    description: '鑷畾涔夌殑鏈堝害閿€鍞暟鎹姤鍛?,
    category: '鑷畾涔夋姤琛?,
    type: 'primary',
    icon: 'Document',
    color: '#409EFF',
    lastUpdate: '2024-01-15 11:00'
  }
])

// 鏈€杩戜娇鐢ㄧ殑鎶ヨ〃
const recentReports = ref([
  {
    id: 1,
    name: '閿€鍞眹鎬绘姤琛?,
    category: '閿€鍞姤琛?,
    type: 'primary',
    lastUsed: '2024-01-15 10:00',
    useCount: 25
  },
  {
    id: 7,
    name: '閿€鍞暟鎹€忚琛?,
    category: '閫忚鎶ヨ〃',
    type: 'primary',
    lastUsed: '2024-01-15 09:30',
    useCount: 18
  },
  {
    id: 3,
    name: '搴撳瓨鐩樼偣鎶ヨ〃',
    category: '搴撳瓨鎶ヨ〃',
    type: 'warning',
    lastUsed: '2024-01-15 08:45',
    useCount: 12
  }
])

// 閿€鍞姤琛ㄦā鏉?
const salesTemplates = ref([
  {
    id: 1,
    name: '閿€鍞秼鍔垮垎鏋?,
    description: '鎸夋椂闂寸淮搴﹀垎鏋愰攢鍞秼鍔?,
    icon: 'TrendCharts'
  },
  {
    id: 2,
    name: '瀹㈡埛閿€鍞帓琛?,
    description: '瀹㈡埛閿€鍞噾棰濇帓琛屾',
    icon: 'Trophy'
  },
  {
    id: 3,
    name: '浜у搧閿€鍞垎鏋?,
    description: '浜у搧閿€鍞儏鍐靛拰鍗犳瘮鍒嗘瀽',
    icon: 'PieChart'
  }
])

// 閲囪喘鎶ヨ〃妯℃澘
const purchaseTemplates = ref([
  {
    id: 4,
    name: '閲囪喘鎴愭湰鍒嗘瀽',
    description: '閲囪喘鎴愭湰鏋勬垚鍜屽彉鍖栬秼鍔?,
    icon: 'Money'
  },
  {
    id: 5,
    name: '渚涘簲鍟嗚瘎浼?,
    description: '渚涘簲鍟嗙哗鏁堣瘎浼版姤琛?,
    icon: 'Star'
  },
  {
    id: 6,
    name: '閲囪喘鍛ㄦ湡鍒嗘瀽',
    description: '閲囪喘鍛ㄦ湡鍜屽埌璐ф椂闂村垎鏋?,
    icon: 'Clock'
  }
])

// 搴撳瓨鎶ヨ〃妯℃澘
const inventoryTemplates = ref([
  {
    id: 7,
    name: '搴撳瓨鍛ㄨ浆鍒嗘瀽',
    description: '搴撳瓨鍛ㄨ浆鐜囧拰婊為攢鍒嗘瀽',
    icon: 'Refresh'
  },
  {
    id: 8,
    name: '搴撳瓨棰勮鎶ヨ〃',
    description: '搴撳瓨涓嶈冻鍜岀Н鍘嬮璀?,
    icon: 'Warning'
  },
  {
    id: 9,
    name: '搴撳瓨鍙樺姩鏄庣粏',
    description: '搴撳瓨杩涘嚭鍙樺姩璇︾粏璁板綍',
    icon: 'List'
  }
])

// 鏂规硶
const handleCategoryChange = (category) => {
  activeCategory.value = category
}

const openReport = (report) => {
  // 鏍规嵁鎶ヨ〃绫诲瀷璺宠浆鍒颁笉鍚岀殑鎶ヨ〃椤甸潰
  if (report.category === '閿€鍞姤琛?) {
    router.push('/reports/sales')
  } else if (report.category === '閲囪喘鎶ヨ〃') {
    router.push('/reports/purchase')
  } else if (report.category === '搴撳瓨鎶ヨ〃') {
    router.push('/reports/inventory')
  } else if (report.category === '璐㈠姟鎶ヨ〃') {
    router.push('/reports/finance')
  } else if (report.category === '閫忚鎶ヨ〃') {
    router.push('/reports/pivot')
  } else {
    ElMessage.info('鎶ヨ〃鍔熻兘寮€鍙戜腑...')
  }
}

const editReport = (report) => {
  ElMessage.info('缂栬緫鎶ヨ〃鍔熻兘寮€鍙戜腑...')
}

const deleteReport = async (report) => {
  try {
    await ElMessageBox.confirm('纭畾瑕佸垹闄よ鎶ヨ〃鍚楋紵', '鎻愮ず', {
      confirmButtonText: '纭畾',
      cancelButtonText: '鍙栨秷',
      type: 'warning'
    })
    
    const index = customReports.value.findIndex(item => item.id === report.id)
    if (index > -1) {
      customReports.value.splice(index, 1)
      ElMessage.success('鍒犻櫎鎴愬姛')
    }
  } catch {
    // 鐢ㄦ埛鍙栨秷鍒犻櫎
  }
}

const exportReport = (report) => {
  ElMessage.success(`姝ｅ湪瀵煎嚭鎶ヨ〃锛?{report.name}`)
}

const showCreateReportDialog = () => {
  createReportDialogVisible.value = true
  resetCreateForm()
}

const showTemplateDialog = () => {
  templateDialogVisible.value = true
}

const createReport = async () => {
  if (!createReportFormRef.value) return
  
  try {
    await createReportFormRef.value.validate()
    createLoading.value = true
    
    // 妯℃嫙鍒涘缓鎶ヨ〃
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    const newReport = {
      id: Date.now(),
      name: createReportForm.name,
      description: createReportForm.description,
      category: '鑷畾涔夋姤琛?,
      type: 'primary',
      icon: 'Document',
      color: '#409EFF',
      lastUpdate: new Date().toLocaleString()
    }
    
    customReports.value.unshift(newReport)
    ElMessage.success('鎶ヨ〃鍒涘缓鎴愬姛')
    createReportDialogVisible.value = false
    
  } catch (error) {
    console.error('琛ㄥ崟楠岃瘉澶辫触:', error)
  } finally {
    createLoading.value = false
  }
}

const useTemplate = (template) => {
  ElMessage.success(`姝ｅ湪浣跨敤妯℃澘锛?{template.name}`)
  templateDialogVisible.value = false
  // 杩欓噷鍙互璺宠浆鍒版姤琛ㄨ璁″櫒
}

const handleCreateDialogClose = () => {
  resetCreateForm()
}

const resetCreateForm = () => {
  Object.assign(createReportForm, {
    name: '',
    type: '',
    dataSource: '',
    description: '',
    template: ''
  })
  createReportFormRef.value?.clearValidate()
}

// 鐢熷懡鍛ㄦ湡
onMounted(() => {
  // 鍒濆鍖栨暟鎹?
})
</script>

<style scoped>
.reports-center {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.report-categories {
  margin-bottom: 30px;
}

.category-content {
  padding: 20px 0;
}

.report-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.report-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.report-icon {
  text-align: center;
  margin-bottom: 15px;
}

.report-card h4 {
  margin: 0 0 10px 0;
  color: #303133;
  text-align: center;
}

.report-card p {
  margin: 0 0 15px 0;
  color: #606266;
  font-size: 14px;
  text-align: center;
  flex: 1;
}

.report-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.update-time {
  font-size: 12px;
  color: #909399;
}

.report-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.recent-reports {
  margin-top: 30px;
}

.recent-reports h4 {
  margin-bottom: 20px;
  color: #303133;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.template-card {
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.template-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.template-preview {
  margin-bottom: 15px;
}

.template-card h4 {
  margin: 0 0 10px 0;
  color: #303133;
}

.template-card p {
  margin: 0 0 15px 0;
  color: #606266;
  font-size: 14px;
  flex: 1;
}
</style>
